<script setup>
import { ref,onMounted } from 'vue'
import HomePanel from './HomePanel.vue';
import { getHotPopularService } from '@/api/Home';
import GoodsItem from './GoodsItem.vue';
const hotArticle = ref('热门推荐')
const Rich = ref('大甩卖，大甩卖，lol英雄打折促销活动开始，英雄全部5元一个，新英雄上架1块钱')
const HotPopularList = ref([])
const getHotPopular = async() => { 
    const res = await getHotPopularService()
    HotPopularList.value = res.data.result
}
onMounted(() => {
    getHotPopular()
})
</script>
<template>
    <HomePanel :title="hotArticle" :text="Rich">
        <template #hot>
            <div class="Fresh">
                <ul>
                     <li v-for="item in HotPopularList" :key="item.id">
                       <GoodsItem :item="item"></GoodsItem>
                    </li>
                </ul>
            </div>
        </template>
    </HomePanel>
</template>
<style scoped>

   .Fresh ul{
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
   }
   .Fresh ul li {
    background-color: #fff;
    width: 260px;
    height: 320px;
   }
</style>